今天一直在解決firebase的問題，網頁顯示沒資料，但get的到...

跟之前的功能一樣，在app.py增加API

app.py

@app.route('/get_recent', methods=['POST'])
def get_recent():
    player = str(request.form.getlist('p')[0])
    stat = get_hitter_stat(player)
    if stat:
        return jsonify(stat['近況'])
    else:
        return redirect(url_for('index'))

並且在index.html寫ajax

function get_recent(){
    let p = document.getElementById("player").value;
    if(p!=='選擇球員'){
        let recent_table_head = $('#recent_stat_table > thead');
        let recent_table_body = $('#recent_stat_table > tbody');
        $.ajax({
            type: 'POST',
            url: "/get_recent",
            data: { "p": p },
            success: function (result) {
                recent_table_head.empty();
                recent_table_body.empty();
                let head = ['Date', 'OPP', 'PA', 'AB', 'RBI', 'R', 'H', '2B', '3B', 'HR', 'SO', 'SB', 'CS', 'AVG'];
                let tr = $('<tr/>');
                for(let i = 0; i < head.length; i++){
                    let th = $('<th/>', {
                        scope: 'col',
                        text: head[i]
                    });
                    tr.append(th);
                }
                recent_table_head.append(tr);

                for(let i = 0; i < result['Date'].length; i++){
                    let recent_body_tr = $('<tr/>');
                    for(let type in head){
                        let recent_body_th = $('<th/>', {
                            scope: 'col',
                            text: result[head[type]][i]
                        });
                        recent_body_tr.append(recent_body_th);
                    }
                    recent_table_body.append(recent_body_tr);
                }
            }
        });
    }
}

並且在Html增加表格

 <p>
    <h2 class="mb-0">
        <button class="btn btn-secondary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#recent_table"
            aria-expanded="false" aria-controls="recent_table">
            打擊近況
        </button>
    </h2>
</p>
<div class="collapse" id="recent_table">
    <table id="recent_stat_table" class="table">
        <thead>

        </thead>
        <tbody></tbody>
    </table>
</div>

補充說明：

js那邊要特別宣告一個head是因為要控制數據的順序，因為讀出來的順序不一定是我要的，所以我特別宣告一個變數。

並且把前面的db_connect.py改寫了一下

def store_recent(data):
    db = firestore.client()
    batch = db.batch()

    for player in data:
        doc_ref = db.collection(u'打者').document(player['Name'])
        doc = doc_ref.get()
            
        if doc.exists and doc.to_dict()['近況'] != {}:
            batch.update(doc_ref, {u'近況':player})
        else:
            doc_ref.set({u'近況':player}, merge = True)
    batch.commit()

多增加條件讓資料不會被覆蓋掉

發現還是必須將年度數據也爬下來比較完整，爬的時候希望能改掉前面比較醜的寫法。